<template>
	<view :style="overflowStyle">
		<mescroll-body height="500" :up="upOption" :sticky="true" :down="down" @init="mescrollInit" @down="downCallback"
			@up="upCallback">
			<view class="fnav flex_r_between" :style="{background:bgcolor}">
				<view class="nav-left">
					<uni-icons type="left" :size="20" :color="colorNav" @click="back"></uni-icons>
				</view>
				<view class="tit" :style="{color:colorNav}">服务项目</view>
				<view class="fixed-loc" @click="toTenList">
					<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/nv-icon.png" mode=""></image>
					<view>
						附近
					</view>
				</view>
			</view>
			<view class="massage-banner-content">
				<image :src="bannerDate && bannerDate[0]?bannerDate[0].image:''" mode=""></image>

				<view class="banner-type-list">
					<view class="item-type-bg">
						<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/b1.png" mode=""></image>
						<view>迟到必赔</view>
					</view>
					<view class="item-type-bg">
						<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/b2.png" mode=""></image>
						<view>不满意重做</view>
					</view>
					<view class="item-type-bg">
						<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/b3.png" mode=""></image>
						<view>7-24小时服务</view>
					</view>
					<view class="item-type-bg">
						<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/b4.png" mode=""></image>
						<view>全场保证</view>
					</view>
				</view>
			</view>
			<view class="massage-type-content">
				<scroll-view scroll-x class="massage-type">
					<view @click="changList(item)"
						:class="current == item.id?'massage-item massage-item-select':'massage-item'"
						v-for="(item,index) in massageType" :key="index">
						<image :src="current == item.id?item.check_image:item.image" mode=""></image>
						<view>{{item.name}}</view>
					</view>
				</scroll-view>
			</view>

			<view class="">
				<view class="sticky-tabs">
					<cc-dropDownMenu bgcolor="#F5F7F8" activeColor="#FD3530" :titleArr="titleArr" :dropArr="dropArr"
						@finishDropClick="finishClick" @showClick="showClick" @changStyle="changStyle"
						@screenPopup="screen"></cc-dropDownMenu>
				</view>
				<view class="massagist-list">
					<view class="horizontal-list">
						<horizontalMassage :isStyle="isStyle" :list="massageList" ref="massage"></horizontalMassage>
					</view>
				</view>
			</view>
		</mescroll-body>
		<shaixuanPopup ref="shaixuanPopup" @closePopup="closePopup" @massageResult="massageResult"></shaixuanPopup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		mixins: [MescrollMixin],
		computed: {
			...mapState({
				'userLocation': 'userLocation'
			}),
		},
		data() {
			return {
				overflowStyle: {

				},
				current: 0,
				massageType: [],
				isStyle: false,
				titleArr: ['综合排序', '筛选项'],
				dropArr: [
					// 区域
					[{
							text: '综合排序',
							value: 0
						},
						{
							text: '销量最高',
							value: 1
						}, {
							text: '好评多',
							value: 2
						},
						{
							text: "上门快",
							value: 3
						},
						{
							text: "价格低",
							value: 4
						}
					]
				],
				sort: 0,
				bannerDate: {},
				massageResultData: {},
				page: 1,
				massageList: [],
				down: {
					auto: false,

				},
				upOption: {
					page: {
						size: 4, // 每页数据的数量,默认10
					},
					noMoreSize: 4,
				},
				bgcolor: 'rgba(0,0,0,0)',
				colorNav: "#fff"
			}
		},
		onLoad() {
			this.getCate()
			this.getBanner()
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.bgcolor = '#fff'
				this.colorNav = '#000'
			} else {
				this.bgcolor = ''
				this.colorNav = '#fff'
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toTenList() {
				uni.navigateTo({
					url: '/otherpages/technician/technicianList'
				})
			},
			downCallback() {
				this.massageList = []
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let that = this
				this.request.httpTokenRequest({
					url: "service/getServiceList",
					method: "get"
				}, {
					distance: this.massageResultData.slidernum,
					gender: this.massageResultData.sex,
					category_id: this.current,
					key: this.keynames ? this.keynames : this.massageResultData.elsename,
					age: this.massageResultData.age,
					sort: this.sort,
					page: page.num,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
					pageSize: 10
				}).then(res => {
					if (res.code == 0) {
						that.massageList = [...that.massageList, ...res.data.data]
						that.mescroll.endSuccess(that.massageList.length, that.massageList.length == res.data
							.total ? false : true)
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			},
			showClick(data) {
				if (data == false) {
					this.overflowStyle = {
						position: 'fixed',
						bottom: 0,
						top: 0,
						left: 0,
						right: 0
					}
				} else {
					this.overflowStyle = {
						position: 'relative'
					}
				}
			},
			finishClick(item) {
				this.sort = item[0]
				this.downCallback()
			},
			changStyle() {
				this.isStyle = !this.isStyle
			},
			changList(item) {
				this.current = item.id
				this.downCallback()
			},
			getCate() {
				var that = this
				this.request.httpTokenRequest({
					url: "service/category",
					method: "get"
				}).then(function(data) {
					if (data.code == 0) {
						that.massageType = data.data
					} else {

					}
				})
			},
			getBanner() {
				var that = this
				this.request.httpTokenRequest({
					url: "index/getBanner",
					method: "get"
				}, {
					location: 2
				}).then(function(res) {
					if (res.code == 0) {
						that.bannerDate = res.data
					} else {}
				})

			},
			massageResult(data) {
				this.massageResultData = data
				this.downCallback()
				this.overflowStyle = {
					position: 'relative'
				}
			},
			closePopup() {
				this.overflowStyle = {
					position: 'relative'
				}
			},
			initData() {
				this.page = 1
				this.massageList = []
				this.getMassageList()
			},
			screen() {
				this.$refs.shaixuanPopup.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fnav {
		position: fixed;
		height: 90rpx;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		padding: 0 30rpx;
		box-sizing: content-box;
		width: calc(100vw - 60rpx);
		padding-top: var(--status-bar-height);
	}
	.nav-left {
		width: 153rpx;
	}
	.fixed-loc {
		width: 153rpx;
		height: 56rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 32rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 11;

		image {
			width: 20rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.massage-banner-content {
		height: 515rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%
		}

		.banner-type-list {
			position: absolute;
			bottom: 70rpx;
			right: 30rpx;
			left: 30rpx;
			display: flex;
			align-items: center;
			height: 60rpx;
			background-color: rgba(0, 0, 0, .5);
			justify-content: space-around;
			border-radius: 400px;
			padding: 0 22rpx;
			line-height: 60rpx;

			.item-type-bg {
				display: flex;
				align-items: center;

				view {
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #F3C673;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 6rpx;
				}
			}

		}
	}

	.massage-type-content {
		// padding: 0 30rpx;
	}

	.sticky-tabs {
		background-color: #F5F7F8;
	}

	.massage-type {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		padding: 30rpx 36rpx;
		padding-right: 0;
		white-space: nowrap;

		.massage-item {
			text-align: center;
			flex: 1 0 auto;
			padding: 0 20rpx;
			display: inline-block;

			image {
				width: 47rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
			}

			font-size: 26rpx;
			font-family: PingFangSC,
			PingFang SC;
			font-weight: 400;
			color: #626262;
		}

		.massage-item-select {
			color: #FD3530;
		}
	}

	.filter-fields {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		padding: 31rpx 29rpx;

		.item-filter-fields {
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #000000;

			.down-icon {
				width: 13rpx;
				height: 8rpx;
				margin-left: 10rpx;
			}

			.style-icon {
				width: 35rpx;
				height: 30rpx;
			}
		}
	}


	/* 筛选弹窗 */
	.sub-menu-class {
		width: 100%;
		transform: translate3d(0, - 100%, 0);
		max-height: 345px;
		background-color: #ffffff;
		z-index: 9999;
		box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
		overflow: hidden;
		flex-direction: row;
		transition: transform .15s linear;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		padding-top: 15rpx;

		&.hide {
			display: none;
		}

		&.show {
			transform: translate3d(0, calc(44px + 1rpx), 0);
		}

		.route-selection {
			display: flex;
			align-items: center;
			padding: 15rpx 30rpx;
			justify-content: space-between;

			vew {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			image {
				width: 34rpx;
				height: 30rpx;
			}
		}
	}

	.mask {
		z-index: 999;
		position: fixed;
		top: 180rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0);
		transition: background-color .15s linear;

		&.show {
			background-color: rgba(0, 0, 0, 0.5);
		}

		&.hide {
			display: none;
		}
	}
</style>